/* � 2009 ROBO Design
 * http://www.robodesign.ro
 */

// Keep everything in anonymous function, called on window load.
if(window.addEventListener) {
window.addEventListener('load', function () {
	var canvas, context, canvaso, contexto;
	var tool = false;
	var tool_default = 'rect';

	
	// Initialization sequence.
	function init () {
		// Find the canvas element.
		canvaso = document.getElementById('imageView');
		if (!canvaso) {
			alert('Error: I cannot find the canvas element!');
			return;
		}
	
		if (!canvaso.getContext) {
			alert('Error: no canvas.getContext!');
			return;
		}

		// Get the 2D canvas context.
		contexto = canvaso.getContext('2d');
		if (!contexto) {
			alert('Error: failed to getContext!');
			return;
		}

		// Add the temporary canvas.
		var container = canvaso.parentNode;
		canvas = document.createElement('canvas');
		if (!canvas) {
			alert('Error: I cannot create a new canvas element!');
			return;
		}

		canvas.id     = 'imageTemp';
		canvas.width  = canvaso.width;
		canvas.height = canvaso.height;
		container.appendChild(canvas);

		context = canvas.getContext('2d');

		// Get the tool select input.
		var tool_select = document.getElementById('dtool');
		if (!tool_select) {
			alert('Error: failed to get the dtool element!');
		return;
		}
		tool_select.addEventListener('change', ev_tool_change, false);

		// Activate the default tool.
		if (tools[tool_default]) {
			tool = new tools[tool_default]();
			tool_select.value = tool_default;
		}

		// Attach the mousedown, mousemove and mouseup event listeners.
		canvas.addEventListener('mousedown', ev_canvas, false);
		canvas.addEventListener('mousemove', ev_canvas, false);
		canvas.addEventListener('mouseup',   ev_canvas, false);
	}

	//Permet de g�rer les �v�nements du canvas
	function ev_canvas (ev) {
	if (ev.layerX || ev.layerX == 0) { // Firefox
	  ev._x = ev.layerX;
	  ev._y = ev.layerY;
	} else if (ev.offsetX || ev.offsetX == 0) { // Opera
	  ev._x = ev.offsetX;
	  ev._y = ev.offsetY;
	}
	
	var func = tool[ev.type];
		if (func) {
			func(ev);
		}
	}
	
	function ev_tool_change (ev) {
		if (tools[this.value]) {
			tool = new tools[this.value]();
		}
	}
	
	function sendMessage(msg){
		var tchat = document.getElementById("tchat");
		tchat.appendChild(createTextNode(msg));
		/** version jquery
		$("#tchat").append("</br>" + msg);
		*/
	}
	
	function img_update () {
		contexto.drawImage(canvas, 0, 0);
		context.clearRect(0, 0, canvas.width, canvas.height);
	}
	
	//Liste d'outil
	var tools = {};
	
	
	/***** Outil de dessin ****
	****************************
	*/
	tools.pencil = function () {
		var tool = this;
		this.started = false;
                var color = document.getElementById("color").style.backgroundColor;
		// This is called when you start holding down the mouse button.
		// This starts the pencil drawing.
		this.mousedown = function (ev) {
			context.beginPath();
			context.moveTo(ev._x, ev._y);
			tool.started = true;
                        color = document.getElementById("color").style.backgroundColor;
		};

		// This function is called every time you move the mouse. Obviously, it only 
		// draws if the tool.started state is set to true (when you are holding down 
		// the mouse button).
		this.mousemove = function (ev) {
		  if (tool.started) {
			context.lineTo(ev._x, ev._y);
                        console.log(document.getElementById("color").getAttribute("value"));
                        context.strokeStyle = color;
			context.stroke();
		  }
		};

		// This is called when you release the mouse button.
		this.mouseup = function (ev) {
			if (tool.started) {
				tool.mousemove(ev);
				tool.started = false;
				img_update();
			}
		};
	};
	
	
	
	//creation et evenement rectangle
	tools.rect = function () {
		var tool = this;
		this.started = false;
                var color = document.getElementById("color").style.backgroundColor;

		this.mousedown = function (ev) {
			tool.started = true;
			tool.x0 = ev._x;
			tool.y0 = ev._y;
                        color = document.getElementById("color").style.backgroundColor;
		};
		
		this.mousemove = function (ev) {
			if (!tool.started) {
				return;
			}

			var x = Math.min(ev._x,  tool.x0),
				y = Math.min(ev._y,  tool.y0),
				w = Math.abs(ev._x - tool.x0),
				h = Math.abs(ev._y - tool.y0);

			context.clearRect(0, 0, canvas.width, canvas.height);

			if (!w || !h) {
				return;
			}
			context.strokeStyle = color;
			context.strokeRect(x, y, w, h);
		};

		this.mouseup = function (ev) {
			if (tool.started) {
				tool.mousemove(ev);
				tool.started = false;
				img_update();
			}
		};
	};
	
	//creation et evenement line
	tools.line = function () {
		var tool = this;
		this.started = false;
                var color = document.getElementById("color").style.backgroundColor;

		this.mousedown = function (ev) {
			tool.started = true;
			tool.x0 = ev._x;
			tool.y0 = ev._y;
                        color = document.getElementById("color").style.backgroundColor;
		};

		this.mousemove = function (ev) {
			if (!tool.started) {
				return;
			}

			context.clearRect(0, 0, canvas.width, canvas.height);

			context.beginPath();
			context.moveTo(tool.x0, tool.y0);
			context.lineTo(ev._x,   ev._y);
                        context.strokeStyle = color;
			context.stroke();
			context.closePath();
		};

		this.mouseup = function (ev) {
			if (tool.started) {
				tool.mousemove(ev);
				tool.started = false;
				img_update();
			}
		};
	};
	
	tools.circle = function(){
		var tool = this;
		this.started = false;
                var color = document.getElementById("color").style.backgroundColor;
                
		
		//Point de depart
		this.mousedown = function (ev) {
			tool.started = true;
			tool.x0 = ev._x;
			tool.y0 = ev._y;
                        color = document.getElementById("color").style.backgroundColor;
		};
		
		this.mousemove = function (ev) {
			if (!tool.started) {
				return;
			}
			
			var radius = Math.sqrt(Math.pow(ev._x - tool.x0, 2) + Math.pow(ev._y - tool.y0, 2));
						
			context.clearRect(0, 0, canvas.width, canvas.height);
			
			//verifie si les points ne sont pas similaires
			if (!ev._x || !ev._y) {
				return;
			}
			context.beginPath();
			context.arc(tool.x0, tool.y0, radius, 0, Math.PI*2, true);
                        context.strokeStyle = color;
			context.stroke();
			context.closePath();
		};

		this.mouseup = function (ev) {
			if (tool.started) {
				tool.mousemove(ev);
				tool.started = false;
				img_update();
			}
		};
	};

  init();
}, false);}

// vim:set spell spl=en fo=wan1croql tw=80 ts=2 sw=2 sts=2 sta et ai cin fenc=utf-8 ff=unix:
